<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			ul{
				clear: both;
				text-align: center;
				line-height: 40px;
			}
			li{
				border: 1px solid black;
				list-style: none;
				width: 120px;
				float: left;
			}
		</style>
	</head>
	<body>
			<div id="app">
			
				<div>
					全选<br>
					<input type="checkbox" @change="handelChange" v-model="isAllChecked"/>
					<ul>
						<li>复选框</li>
						<li>名字</li>
						<li>价钱</li>
						<li>数量</li>
						<li>操作</li>
					</ul>
					<ul v-for="(item,index) in datalist" :key="item.id">
						<li><input type="checkbox" v-model="checkgroup" :value="item"/></li>
						<li>{{item.name}}</li>
						<li>{{item.price}}</li>
						<li>{{item.count}}</li>
						<li>
							<button type="button" @click="item.count++">+</button>
							<button type="button" @click="item.count==0?0:item.count--">-</button>
						</li>
					</ul><br>
					
				</div>
				<div>xx</div>
				<p>{{checkgroup}}</p>
				<p>总计:{{getSum()}}</p>
			</div>
	</body>
	
</html>
<script>
 var vm = new Vue({
	  el:'#app',
	 data(){
		 return{
			 msg:'i love you',
			 isAllChecked:false,
			 checkgroup:[],
			 totalPrices:0,
			 datalist:[
				 {id:1,name:'战神K520',price:5888,count:1},
				 {id:2,name:'iphone12plus',price:6520,count:1},
				 {id:3,name:'百褶裙',price:120,count:1}
			 ]
		 }
	 },
	 methods:{
		getSum(){
		 //函数计算中的状态改变后 会自动重新调用函数一遍
			var sum = 0
			for(var i in this.checkgroup){
			 sum += this.checkgroup[i].count*this.checkgroup[i].price
			 if(this.checkgroup.length === 3){
				 this.isAllChecked = true
			 }
			 else{
				 this.isAllChecked = false
			 }
			}
			return sum
		} ,
		handelChange(){
			// console.log(this.isAllChecked)
			if(this.isAllChecked){
				this.checkgroup = this.datalist
			}
			else{
				this.checkgroup=[]
			}
		}
	 },
	 computed:{
		
	 },
	 mounted() {
	 	
	 }
	 
 })
</script>